<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/yoyoga.css" media="all"/>
    <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script src="/layui/layui.js"></script>
</head>
<body>

<div class="main-content-container" id="trainerInfo">

    <div><h1>合约确认</h1></div>

    <div class="contract-affirm-info">
        <div class="contract-affirm-info-key" style="background-color: ghostwhite">上课场馆:</div>
        <div class="contract-affirm-info-key" style="background-color: lightsteelblue" th:text="${gymInfo.gName}"></div>
        <div class="contract-affirm-info-key" style="background-color: lightsteelblue">签约教练:</div>
        <div class="contract-affirm-info-key" style="background-color: ghostwhite" th:text="${trainerInfo.tName}">签约教练</div>
        <div class="contract-affirm-info-key" style="background-color: ghostwhite" >课时费:</div>
        <div class="contract-affirm-info-key" style="background-color: lightsteelblue" th:text="${trainerInfo.tValue}"></div>
        <div class="contract-affirm-info-key" style="background-color: lightsteelblue">保证金:</div>
        <div class="contract-affirm-info-key" style="background-color: ghostwhite" th:text="${trainerInfo.tValue}">保证金</div>
    </div>

    <div class="contract-affirm-info-rule">
        1、保证金支付成功后，即进入等待教练确认阶段，教练确认后，合约达成。此后每上完一次课后在本系统中进行支付一次课程的费用。</br></br>
        2、学员可随时发起结束合约，合约结束后，平台会将保证金返还至学员账户</br>
    </div>

    <button class="layui-btn layui-btn-radius" onclick="createContract()">确认支付</button>
</div>



<!--折叠面板-->
<script>
    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });
</script>

<!-- head -->
<script>
    layui.use('element', function() {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        //监听导航点击
        element.on('nav(demo)', function(elem) {
            layer.msg(elem.text());
        });
    });
</script>



<script th:inline="javascript">
    function getQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r!=null) return r[2];else return'';
    }

    //创建合约
    function createContract() {
        var gId = getQueryString("gId");
        var tId = getQueryString("tId");
        $.ajax({
            url:"/contract/create",
            type:"post",
            data:{
                "gId":gId,
                "tId":tId
            },
            text:JSON,
            success:function (data) {
                if(data.result=='success'){
                    alert("签约成功！");
                    window.location.href='/html/myTrainer.html';
                }else {
                    if(data.errorCode='001'){
                        if(confirm("您的余额不足以支付保证金，是否去充值？")){
                            window.location.href="/user/toRechargePage";
                        }
                    }else{
                        alert("服务器出错，请重试");
                    }
                }
            }
        })
    }
</script>


</body>
</html>
